import { IRouteItem } from '@/routes/RouteType';
import { getMenuInfoByPath } from '@/routes/RouteUtil';
import { mainRoutes } from '@/routes/modules/menus';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { theme } from 'antd';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { AppMenu } from './AppMenu';
import {
  SiderBodyLayout,
  SiderFootLayout,
  SiderHeadLayout,
  SiderLayout,
  SiderTitle,
} from './AppStyle';

interface Props {}

export const AppSider: React.FC<Props> = (props) => {
  const { pathname } = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [topMenu, setTopMenu] = useState<IRouteItem>();
  const [subMenus, setSubMenus] = useState<IRouteItem[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  useEffect(() => {
    if (pathname) {
      const menuInfo = getMenuInfoByPath(mainRoutes, pathname);
      const { parentKeys, topMenu, topMenuChildren } = menuInfo;

      // setSelectedKeys(parentKeys);
      // setOpenKeys(parentKeys);
      setTopMenu(topMenu);
      if (topMenu && topMenu?.showSider && topMenuChildren.length > 0) {
        setSubMenus(topMenuChildren);
      } else {
        setSubMenus([]);
      }
    }
  }, [pathname]);

  return (
    <>
      {subMenus?.length > 0 ? (
        <SiderLayout
          trigger={null}
          collapsible
          collapsed={collapsed}
          style={{ backgroundColor: colorBgContainer }}>
          {topMenu?.label && (
            <SiderHeadLayout>
              <MenuFoldOutlined style={{ marginRight: 8 }} />
              <SiderTitle>{topMenu?.label}</SiderTitle>
            </SiderHeadLayout>
          )}
          <SiderBodyLayout>
            {/* 单独使用onOpenKey属性的时候会在刷新的时候展开设置的submenu,但无法关闭它，甚至它确实阻止了其他子菜单的打开/关闭。当我们加上了onOpenChange属性的时候就能够实现对其他子菜单的打开/关闭了 */}
            <AppMenu
              menuData={subMenus}
              mode={'inline'}
              ignoreHide={true}
              // defaultSelectedKeys={selectedKeys}
              // defaultOpenKeys={openKeys}
              // openKeys={openKeys}
              // // 注意这个属性 `onOpenChange`
              // onOpenChange={(oKeys) => {
              //   setOpenKeys(oKeys);
              // }}
            />
          </SiderBodyLayout>
          <SiderFootLayout>
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: () => setCollapsed(!collapsed),
              },
            )}
          </SiderFootLayout>
        </SiderLayout>
      ) : null}
    </>
  );
};
